<template>
  <WidgetBase :class="{ 'is-editing': editing, 'is-fixed': data.fixed }" ref="root" :data="data">
    <!-- 使用编辑 -->
    <textarea
      v-if="data.isUse && (data.value || editing)"
      class="fa-widget-remark__input"
      key="input"
      ref="input"
      v-model="data.value"
      :style="style"
      :placeholder="placeholder || '请输入签署备注'"
      :maxlength="data.text.maxLength"
      :draggable="false"
      @click="startEdit"
      @blur="stopEdit"
      @mousedown="inputMouseDown"
    ></textarea>

    <!-- 内容只读查看 -->
    <textarea
      v-else-if="data.isDone || (data.isView && data.value)"
      class="fa-widget-remark__input"
      key="text"
      v-model="data.value"
      readonly
      :style="style"
      :title="data.value"
    ></textarea>

    <template v-else>
      <!-- 文本占位 -->
      <textarea
        v-if="placeholder"
        key="placeholder"
        class="fa-widget-remark__input"
        :style="style"
        readonly
        :placeholder="placeholder"
      ></textarea>

      <WidgetPlaceholder
        v-if="!data.isDone"
        key="widget-placeholder"
        :data="data"
        :vertical="data.h > 50"
        @click.native="startEdit"
      />
    </template>
  </WidgetBase>
</template>

<script lang="ts">
import { computed, defineComponent, nextTick, ref } from 'vue'
import { Widget } from '@/models'
import { awaitTimeout } from '@/utils'
import WidgetBase from '@/components/widget-base/WidgetBase.vue'
import WidgetPlaceholder from '@/components/widget-base/WidgetPlaceholder.vue'

/** 签署备注 */
export default defineComponent({
  name: 'WidgetRemark',

  components: { WidgetBase, WidgetPlaceholder },

  props: {
    /** 控件数据 */
    data: {
      type: Widget,
      required: true
    }
  },

  setup(props, { emit }) {
    /** 输入框 */
    const input = ref<null | HTMLTextAreaElement>(null)

    /** 是否编辑中 */
    const editing = ref(false)

    return {
      /** 输入框 */
      input,

      /** 是否编辑中 */
      editing,

      /** 样式 */
      style: computed(() => {
        const widget = props.data
        const { text } = widget

        return {
          fontSize: widget.fontSizeValue,
          fontFamily: widget.fontFamilyValue as string,
          textAlign: text.textAlign
        }
      }),

      /** 文本提示 */
      placeholder: computed(() => props.data.text.placeholder),

      /** 开始编辑 */
      async startEdit() {
        const widget = props.data

        if (!widget.isUse) return

        editing.value = true

        await nextTick()

        input.value?.focus()

        await awaitTimeout()

        widget.isActivated = true
      },

      /** 结束编辑 */
      async stopEdit() {
        const widget = props.data

        if (!widget.isUse) return

        widget.value = widget.value.trim()

        editing.value = false
      },

      /** 输入框按下事件 */
      inputMouseDown(e: MouseEvent) {
        // 编辑中阻止拖动
        if (editing.value) e.stopPropagation()
      }
    }
  }
})
</script>

<style lang="scss">
.fa-widget-remark {
  // 签署中指定位置
  &.widget-mode-use.is-fixed {
    cursor: pointer;
  }

  &__input {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 0;
    color: $color-text-primary;
    line-height: 1;
    letter-spacing: 0;
    vertical-align: top;
    background-color: transparent;
    border: none;
    resize: none;

    // 非编辑中拖拽时
    .is-draggable:not(.is-editing) & {
      cursor: inherit;
      user-select: none;
    }

    &:focus {
      outline: none;
    }

    &::placeholder {
      color: $color-text-placeholder;
    }
  }

  .fa-widget-placeholder {
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>
